<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="人工解读"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-20">
					<view class="box-problem p-20 mb-20">
						<view class="bg_part mb-20">
							<view class="flex items-center p-10">
								<view class="flex items-center">
									<text class="text-sm">您的具体问题是：</text>
								</view>
							</view>
							<uni-easyinput type="textarea" v-model="postFrom.describe" :inputBorder="false"
								placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
						</view>
						<view class="bg_part" style="background-size: cover;">
							<view class="flex items-center p-10">
								<view class="flex items-center">
									<text class="text-sm">例如：</text>
								</view>
							</view>
							<view class="desc bg-[#EBF7FF] p-10">我想知道我近期的事业发展，以及需要注意的方面有哪些。</view>
						</view>
					</view>
					<view class="box-problem p-20 mb-20">
						<view class="bg_part mb-20" v-if="posts == 1">
							<view class="text-sm p-10">您是否有不适感(可多选):</view>
							<view class="bg_content">
								<view class="flex flex-wrap">
									<view class="flex justify-center items-center w-[33%] mb-20" v-for="(item, idx) in addparmeList"
										:key="idx" @click="handleChoose(item)">
										<view class="text-checkbox mr-10">{{item.value}}</view>
										<ImageBoxVue v-if="addparme.indexOf(item.value) != -1" src="/static/icons/selected.png"
											width="36rpx" height="36rpx"></ImageBoxVue>
										<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
										</ImageBoxVue>
									</view>
								</view>
							</view>
						</view>
						<view class="bg_part mb-10" style="background-size: cover;">
							<view class="flex items-center p-10">
								<text class="text-sm">补充说明：</text>
								<uni-easyinput class="flex-1" type="text" v-model="postFrom.replenishment" :inputBorder="false"
									placeholder="总是听到一些奇怪的声音。"></uni-easyinput>
							</view>
						</view>
						<view class="bg_part mb-10" style="background-size: cover;">
							<view class="flex items-center p-10">
								<text class="text-sm">例如：</text>
								<view class="desc p-10">总是听到一些奇怪的声音。</view>
							</view>
						</view>
					</view>
					<view class="box-supplement mb-20">
						<view class="title flex justify-center items-center">
							<text>补充信息</text>
							<ImageBoxVue class="box-choose" v-if="supplement" src="/static/icons/selected.png" width="36rpx"
								height="36rpx" @click="supplement = false"></ImageBoxVue>
							<ImageBoxVue class="box-choose" v-else src="/static/icons/no_selected2.png" width="36rpx" height="36rpx"
								@click="supplement = true"></ImageBoxVue>
						</view>
						<view class="box-desc">补充信息可有助于专业人员对您的状态进行更加准确的判断及给出有效建议，如介意请取消勾选</view>
					</view>
					<view class="box-module p-20 py-30 mb-20 flex" v-if="supplement">
						<view class="box-year flex items-center flex-1">
							<view class="label flex-1 text-center">出生年份</view>
							<picker-view v-if="true" :value="yearIdx" @change="bindYearChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
						<!-- <view class="box-birthday flex items-center mb-20"> -->
						<view class="box-year flex items-center flex-1">
							<view class="label flex-1 px-20 text-center">生肖</view>
							<picker-view v-if="true" :value="zodiacIdx" @change="bindBirthdayChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in zodiacList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
						<!-- <view class="box-gender flex items-center"> -->
						<view class="box-year flex items-center flex-1">
							<view class="label flex-1 px-20 text-center">性别</view>
							<picker-view v-if="true" :value="genderIdx" @change="bindGenderChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in genderList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
					<view class="box-module p-20 py-30 mb-20 flex" v-if="supplement">
						<view class="box-year flex items-center flex-1">
							<view class="label flex-1 text-center">婚姻状态</view>
							<picker-view v-if="true" :value="marriageIdx" @change="bindMarriageChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in marriageList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
						<!-- <view class="box-birthday flex items-center mb-20"> -->
						<view class="box-year flex items-center">
							<view class="label flex-1 px-20 text-center">感情状态</view>
							<picker-view v-if="true" :value="emotionIdx" @change="bindEmotionChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in emotionList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
						<!-- <view class="box-gender flex items-center"> -->
						<view class="box-year flex items-center">
							<view class="label flex-1 px-20 text-center">症状持续</view>
							<picker-view v-if="true" :value="continueIdx" @change="bindContinuesChange" class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in continueList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="btn-pay flex justify-center mt-30">
			<view class="btn_pay_red flex justify-center items-center" @click="onPlay(1)">
				<text>确定支付</text>
				<view class="pay-num flex items-center">
					<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="28rpx"></ImageBoxVue>
					<text>{{redPrice}}钻</text>
				</view>
				<text>解读</text>
			</view>
		</view>
		<view class="btn-pay flex justify-center mt-30">
			<view class="btn_pay_blue flex justify-center items-center" @click="onPlay(0)">
				<text>确定支付</text>
				<view class="pay-num flex items-center">
					<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="28rpx"></ImageBoxVue>
					<text>{{bluePrice}}钻</text>
				</view>
				<text>解读</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from "./components/sendSetting.vue"
	import AgreementPlatformVue from '../login/components/AgreementPlatform.vue';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import testApi from '@/apis/apiList/testApi';

	const typeList = ref([])
	const posts = ref("") // 板块類型
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		replenishment: "", // 补充说明
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 1, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: 0, // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
	})
	const selcard = ref("") // 星图档案ID字符串
	const starsts = ref("") // 单人星图/双人星图
	const systemSetting = ref([]) // 系统设置列表
	const isAgree = ref(false)
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")
	const addparme = ref([]) // 不适感
	const supplement = ref(false) // 补充信息
	systemSetting.value = uni.getStorageSync('dict');

	const year = ref(2000)
	const yearIdx = ref([60])
	const gender = ref("女")
	const genderIdx = ref([1])
	const zodiac = ref("马")
	const zodiacIdx = ref([6])
	const yearList = ref([])

	const marriage = ref("未婚")
	const marriageIdx = ref([2])
	const emotion = ref("单身中")
	const emotionIdx = ref([2])
	const continues = ref("半年内")
	const continueIdx = ref([2])

	const zodiacList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
	const genderList = ['男', '女']
	const marriageList = ['复婚', '已婚', '未婚', '离异', '再婚', '丧偶']
	const emotionList = ['婚外情', '失恋中', '单身中', '恋爱中', '同性恋']
	const continueList = ['1个月', '3个月', '半年内', '1年内', '1年以上']
	const cardList = [{
		text: "数字",
		value: 0
	}, {
		text: "塔罗",
		value: 1
	}]
	const payList = [{
		text: "蓝钻",
		value: 0
	}, {
		text: "红钻",
		value: 1
	}]
	const addparmeList = [{
		text: "难以入睡",
		value: "难以入睡"
	}, {
		text: "冲动易怒",
		value: "冲动易怒"
	}, {
		text: "胡思乱想",
		value: "胡思乱想"
	}, {
		text: "伤害自己",
		value: "伤害自己"
	}, {
		text: "食欲不振",
		value: "食欲不振"
	}, {
		text: "周身酸痛",
		value: "周身酸痛"
	}, {
		text: "无法沟通",
		value: "无法沟通"
	}, {
		text: "恐惧社交",
		value: "恐惧社交"
	}, {
		text: "全身无力",
		value: "全身无力"
	}, {
		text: "迷惘无助",
		value: "迷惘无助"
	}, {
		text: "逐渐消瘦",
		value: "逐渐消瘦"
	}, {
		text: "暴饮暴食",
		value: "暴饮暴食"
	}, ]
	watch(posts, () => {
		systemSetting.value.map(item => {
			if (posts.value == 1 && postFrom.value.paysts == 0) {
				if (item.name == 'Fastquestion_psyBlue') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (posts.value == 1 && postFrom.value.paysts == 1) {
				if (item.name == 'Fastquestion_psyRed') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (posts.value == 2 && postFrom.value.paysts == 0) {
				if (postFrom.value.starsts == 0) {
					if (item.name == 'Fastquestion_singstarBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.starsts == 1) {
					if (item.name == 'Fastquestion_doublestarBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
			if (posts.value == 2 && postFrom.value.paysts == 1) {
				if (postFrom.value.starsts == 0) {
					if (item.name == 'Fastquestion_singstarRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.starsts == 1) {
					if (item.name == 'Fastquestion_doublestarRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
			if (posts.value == 3 && postFrom.value.paysts == 0) {
				if (postFrom.value.sdes == 0) {
					if (item.name == 'Fastquestion_NumberCardBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.sdes == 1) {
					if (item.name == 'Fastquestion_SystemCardBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
			if (posts.value == 3 && postFrom.value.paysts == 1) {
				if (postFrom.value.sdes == 0) {
					if (item.name == 'Fastquestion_NumberCardRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.sdes == 1) {
					if (item.name == 'Fastquestion_SystemCardRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
		})
	})
	watch(() => {
		return postFrom.value.paysts
	}, () => {
		systemSetting.value.map(item => {
			if (posts.value == 1 && postFrom.value.paysts == 0) {
				if (item.name == 'Fastquestion_psyBlue') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (posts.value == 1 && postFrom.value.paysts == 1) {
				if (item.name == 'Fastquestion_psyRed') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (posts.value == 2 && postFrom.value.paysts == 0) {
				if (postFrom.value.starsts == 0) {
					if (item.name == 'Fastquestion_singstarBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.starsts == 1) {
					if (item.name == 'Fastquestion_doublestarBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
			if (posts.value == 2 && postFrom.value.paysts == 1) {
				if (postFrom.value.starsts == 0) {
					if (item.name == 'Fastquestion_singstarRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.starsts == 1) {
					if (item.name == 'Fastquestion_doublestarRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
			if (posts.value == 3 && postFrom.value.paysts == 0) {
				if (postFrom.value.sdes == 0) {
					if (item.name == 'Fastquestion_NumberCardBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.sdes == 1) {
					if (item.name == 'Fastquestion_SystemCardBlue') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
			if (posts.value == 3 && postFrom.value.paysts == 1) {
				if (postFrom.value.sdes == 0) {
					if (item.name == 'Fastquestion_NumberCardRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
				if (postFrom.value.sdes == 1) {
					if (item.name == 'Fastquestion_SystemCardRed') {
						postFrom.value.sinpay = item.kbidc
					}
				}
			}
		})
	})
	const redPrice = computed(() => {
		let price = 0
		systemSetting.value.map(item => {
			if (item.name == 'Fastquestion_psyRed') {
				price = item.kbidc
			}
		})
		return price
	})
	const bluePrice = computed(() => {
		let price = 0
		systemSetting.value.map(item => {
			if (item.name == 'Fastquestion_psyBlue') {
				price = item.kbidc + 12
			}
		})
		return price
	})
	const payPrice = computed(() => {
		if (payType.value == 1) {
			return redPrice
		} else if (payType.value == 0) {
			return bluePrice
		} else {
			return 0
		}
	})

	onLoad((option) => {
		postFrom.value.describe = option.describe
		bbsplateId.value = option.bbsplateId
		posts.value = option.posts
		for (let i = 1940; i <= 2007; i++) {
			yearList.value.push(i)
		}
		getTypeList()
	})

	const handleChoose = (item) => {
		if (addparme.value.indexOf(item.value) == -1) {
			addparme.value.push(item.value)
		} else {
			let idx = addparme.value.indexOf(item.value)
			addparme.value.splice(idx, 1)
		}
	}
	const bindYearChange = (e) => {
		yearIdx.value = e.detail.value
		year.value = yearList.value[yearIdx.value[0]]
	}
	const bindBirthdayChange = (e) => {
		zodiacIdx.value = e.detail.value
		zodiac.value = zodiacList[zodiacIdx.value[0]]
	}
	const bindGenderChange = (e) => {
		genderIdx.value = e.detail.value
		gender.value = genderList[genderIdx.value[0]]
	}
	const bindMarriageChange = (e) => {
		marriageIdx.value = e.detail.value
		marriage.value = marriageList.value[marriageIdx.value[0]]
	}
	const bindEmotionChange = (e) => {
		emotionIdx.value = e.detail.value
		emotion.value = emotionList[emotionIdx.value[0]]
	}
	const bindContinuesChange = (e) => {
		continueIdx.value = e.detail.value
		continues.value = continueList[continueIdx.value[0]]
	}
	const onPlay = (type) => {
		if (postFrom.value.describe == '') {
			uni.showToast({
				icon: "none",
				title: "请填写您的问题！"
			})
			return
		}
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"bbsplate.id": bbsplateId.value,
			...postFrom.value,
			paysts: type,
			selcard: selcard.value,
			problem: supplement.value ?
				`${year.value},${zodiac.value},${gender.value},${marriage.value},${emotion.value},${continues.value}` : '',
			posts: posts.value,
			addparme: addparme.value.join(',')
		}
		console.log(params)
		// popupShow.value = true
		// return
		communityApi.generatePoss(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: '测试成功'
				})
				setTimeout(() => {
					uni.switchTab({
						url: `/pages/tabbar/user`
					})
				}, 1000)
			} else {
				popupShow.value = true
			}
		})
	}
	const handleChange = (val) => {
		if (val == 1) {
			pickerRef.value.show()
		} else {
			uni.$on('chooseNum', (arr) => {
				console.log(arr)
				postFrom.value.selcard = arr.join(',')
			})
			uni.navigateTo({
				url: `/pages/views/chooseNum?num=3`
			})
		}
	}
	const onchange = (e) => {
		const value = e.detail.value
		// console.log(e.detail.value)
		deckId.value = value[2].value
		postFrom.value['deck.id'] = deckId.value
		// console.log(postFrom.value)
		uni.$on('chooseTarot', (obj) => {
			// console.log(obj)
		})
		uni.navigateTo({
			url: `/pages/test/tarot?id=${deckId.value}&dsts=1&ask=${postFrom.value.describe}&emit=chooseTarot`
		})
	}
	const handleChooseStart = () => {
		uni.$once('choose', (chooses) => {
			console.log(chooses)
			postFrom.value.selcard = chooses.join(',')
			postFrom.value.starsts = chooses.length == 2 ? 1 : 0
			console.log(postFrom.value)
		})
		uni.navigateTo({
			url: `/pages/views/starChart`
		})
	}
	const setbBsplateId = (val) => {
		bbsplateId.value = val.id
		bbsplate.value = val
		if (val.btp == 1) {
			// 心理专区
			posts.value = 1
		}
		if (val.btp == 2) {
			// 星图区
			posts.value = 2
		}
		if (val.btp == 3) {
			// 卡牌区
			posts.value = 3
			pickerRef.value.show()
		}
	}
	const getTypeList = () => {
		testApi.getCardtpyelistAndson().then(res => {
			res.data.map(item => {
				item.level = 1
			})
			formatData(res.data)
			items.value = res.data
		})
	}
	const formatData = (data) => {
		data.map(item => {
			item.children = item.sonlist || item.dlist
			if (item.sonlist) {
				formatData(item.sonlist)
			}
			if (item.dlist) {
				formatData(item.dlist)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.box-problem {
		background: linear-gradient(180deg, #D3EFFF 0%, #DDF2FF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		// border: 2rpx solid;
		// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

		.bg_part {
			background: url(/static/test/bg_part.png) left top no-repeat;
			background-size: contain;
		}

		.bg_content {
			background: rgba(255, 255, 255, 0.4);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 32rpx;

			.text-checkbox {
				font-weight: 400;
				font-size: 26rpx;
				color: #273A3F;
				line-height: 36rpx;
			}
		}

		.desc {
			color: #B7CDDB;
		}
	}

	.box-supplement {
		background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		overflow: hidden;

		.title {
			position: relative;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2043;
			line-height: 56rpx;
			background: url(/static/test/bg_title.png) no-repeat;
			background-size: cover;

			.box-choose {
				position: absolute;
				top: 26rpx;
				right: 40rpx;
			}
		}

		.box-desc {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
			padding: 28rpx 40rpx;
		}
	}

	.box-module {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.picker-view {
			width: 96rpx;
			height: 140rpx;
		}

		.item {
			font-size: 24rpx;
			line-height: 58rpx;
			text-align: center;
		}

		.box-year {
			font-weight: 500;
			font-size: 24rpx;
			color: #4370C1;

			.label {
				background: #E3EDFF;
				// border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #B4CCF7;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				// border-radius: 8rpx;
				// border: 2rpx solid #B4CCF7;
			}

			.item {
				background: #E3EDFF;
				border: 2rpx solid #B4CCF7;
			}
		}

		.box-birthday {
			font-weight: 500;
			font-size: 30rpx;
			color: #634A97;

			.label {
				background: #F2ECFF;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #E2D4FF;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #E2D4FF;
			}

			.item {
				background: #F2ECFF;
				border: 2rpx solid #E2D4FF;
			}
		}

		.box-gender {
			font-weight: 500;
			font-size: 30rpx;
			color: #C3743B;

			.label {
				background: #FFE7D6;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #FFD8BB;
				line-height: 58rpx;
				padding-left: 10rpx;
			}

			.picker-view {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #FFD8BB;
			}

			.item {
				background: #FFE7D6;
				border: 2rpx solid #FFD8BB;
			}
		}
	}

	.btn-pay {
		.btn_pay_red {
			background: url('/static/test/btn_pay_red.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		.btn_pay_blue {
			background: url('/static/test/btn_pay_blue.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}

		.pay-num {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 12rpx;
			padding: 6rpx 10rpx;

			text {
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				line-height: 22rpx;
				margin-left: 6rpx;
			}
		}
	}
</style>